<template>
    <view class="content" v-if="see">
        <u-navbar :is-back="true" back-icon-color="#000" :title="title" :background="background" :border-bottom="false" title-color="#000" title-size="30">
            <view class="u-flex" slot="right" style="padding-right: 20rpx;font-size: 28rpx;" @click="$gTo('/pages/index/map')" 
                v-show="isShow">
                <image src="../../static/icon/add_03.png" class="add-03"></image>
                <view class="head-add">地图</view>
            </view>
        </u-navbar>
        
        <view class="search">
            <u-search bg-color="#fff" :show-action="false" v-model="keyword" shape="round" placeholder="请输入项目名称" @search="doSearch"></u-search>
        </view>
        
        <!-- 筛选项 -->
        <view v-show="isShow">
            <u-dropdown ref="uDropdown">
                <u-dropdown-item title="区域">
                    <view class="slot-content drop">
                        <view class="u-text-center u-m-b-20 u-flex">
                            <view class="right-drop">
                                <scroll-view scroll-y="true" class="right-box">
                                	<view class="left" v-for="(item, index) in data.region" :key="index"
                                	    :class="{activeR : regionId == item.id || regionId == item.region_id}" @click="changeCate(item)">
                                	    {{item.name || item.region_name}}
                                	</view>
                                </scroll-view>
                            </view>
                        </view>
                        <view class="drop-btn">
                            <u-button type="default" size="medium" @click="reset(1)">重置</u-button>
                            <u-button type="primary" size="medium" @click="confirm(1)">确定</u-button>
                        </view>
                    </view>
                </u-dropdown-item>
                <u-dropdown-item title="价格">
                    <view class="slot-content drop">
                        <view class="u-text-center u-m-b-20">
                            <view class="term">
                                <view class="dropprice" :class="{activePrice : priceId == el.id}" 
                                    v-for="(el, ind) in data.price" :key="ind" @click="changePrice(el)">{{el.name}}</view>
                            </view>
                            <view class="custom">
                                <view class="custom-tit">
                                    自定义价格<text style="color: #adadad; font-weight: normal;">（单位：万元）</text>
                                </view>
                                <view class="custom-inp">
                                    <input type="number" v-model="minPrice" placeholder="最小价格" class="inp">
                                    至
                                    <input type="number" v-model="maxPrice" placeholder="最大价格" class="inp">
                                </view>
                            </view>
                        </view>
                        <view class="drop-btn">
                            <u-button type="default" size="medium" @click="reset(2)">重置</u-button>
                            <u-button type="primary" size="medium" @click="confirm(2)">确定</u-button>
                        </view>
                    </view>
                </u-dropdown-item>
                <u-dropdown-item title="面积">
                    <view class="slot-content drop">
                        <view class="u-text-center u-m-b-20">
                            <view class="term">
                                <view class="dropprice" :class="{activePrice : areaId == el.id}" 
                                    v-for="(el, ind) in data.area" :key="ind" @click="changeArea(el)">{{el.name}}</view>
                            </view>
                            <view class="custom">
                                <view class="custom-tit">
                                    自定义面积<text style="color: #adadad; font-weight: normal;">（单位：m²）</text>
                                </view>
                                <view class="custom-inp">
                                    <input type="number" v-model="minArea" placeholder="最小面积" class="inp">
                                    至
                                    <input type="number" v-model="maxArea" placeholder="最大面积" class="inp">
                                </view>
                            </view>
                        </view>
                        <view class="drop-btn">
                            <u-button type="default" size="medium" @click="reset(3)">重置</u-button>
                            <u-button type="primary" size="medium" @click="confirm(3)">确定</u-button>
                        </view>
                    </view>
                </u-dropdown-item>
                <u-dropdown-item title="更多">
                    <view class="slot-content drop">
                        <view class="u-text-center u-m-b-20">
                            <view class="drop-more" @click="KStimeShow = true">
                                <view>开盘开始时间：</view>
                                <input type="text" v-model="startTime" placeholder="请选择开始时间" disabled>
                            </view>
                            <view class="drop-more" @click="JStimeShow = true">
                                <view>开盘结束时间：</view>
                                <input type="text" v-model="endTime" placeholder="请选择结束时间" disabled>
                            </view>
                            <view class="drop-more" @click="show_1 = true">
                                <view>销售状态：</view>
                                <input type="text" v-model="sale" placeholder="请选择销售状态" disabled>
                            </view>
                            <view class="drop-more" @click="show_2 = true">
                                <view>户型：</view>
                                <input type="text" v-model="houseType" placeholder="请选择户型" disabled>
                            </view>
                            <view class="drop-more" @click="show_3 = true">
                                <view>项目类型：</view>
                                <input type="text" v-model="project" placeholder="请选择项目类型" disabled>
                            </view>
                            <view class="drop-more" @click="show_4 = true">
                                <view>装修：</view>
                                <input type="text" v-model="fit" placeholder="请选择装修" disabled>
                            </view>
                        </view>
                        <view class="drop-btn">
                            <u-button type="default" size="medium" @click="reset(4)">重置</u-button>
                            <u-button type="primary" size="medium" @click="confirm(4)">确定</u-button>
                        </view>
                    </view>
                </u-dropdown-item>
                
                <u-dropdown-item v-model="sort" title="排序" :options="options1" @change="confirm(5, $event)"></u-dropdown-item>
                
                <u-dropdown-item title="标签" v-if="type == 2">
                    <view class="slot-content drop">
                        <view class="u-text-center u-m-b-20 u-flex">
                            <view class="right-drop">
                                <scroll-view scroll-y="true" class="right-box">
                                	<view class="left" v-for="(item, index) in data.label" :key="index"
                                	    :class="{activeL : item.isSelect}" @click="changeLabel(item)">
                                	    {{item.name}}
                                	</view>
                                </scroll-view>
                            </view>
                        </view>
                        <view class="drop-btn">
                            <u-button type="default" size="medium" @click="reset(6)">重置</u-button>
                            <u-button type="primary" size="medium" @click="confirm(6)">确定</u-button>
                        </view>
                    </view>
                </u-dropdown-item>
            </u-dropdown>
        </view>
        
        <view class="wrapper" v-if="list && list.length > 0">
            <view class="item" v-for="(item, index) in list" :key="index" @click="$gTo('/pages/index/floor-details?id=' + item.id + '&role=' + type)">
                <image :src="item.image" class="del-09"></image>
                <view>
                    <view class="u-flex u-row-between u-col-center">
                        <view>
                            <view class="name">{{item.name}}</view>
                            <view class="area">{{item.region_name}} · {{item.unit_price}}元/m²</view>
                        </view>
                        <view class="baobei2" v-if="type == 3 || type == 4 || type == 7 || from == 1" @click.stop="$gTo('/staff/pages/resident/edit-floor?id=' + item.id)">修改信息</view>
                        <view class="baobei" v-else-if="report != 1" @click.stop="toReport(item)">报备</view>
                        <view class="baobei3" v-else>占位</view>
                    </view>
                    <view class="price u-flex u-row-between">
                        <view class="u-flex">
                            <!-- <view class="u-p-r-12">
                                <text class="p-l">{{item.commission_price}}</text>
                                <text>/套佣金</text>
                            </view> -->
                            <view class="plan">{{item.commission_num}}个方案</view>
                        </view>
                        <image v-if="from == 1 || report == 1" :src="item.checked ? '../../static/icon/choose.png' : '../../static/icon/cancel.png'" class="choose" @click.stop="chooseFloor(item)"></image>
                    </view>
                </view>
            </view>
        </view>
        <view style="height: 94rpx;padding-top: 30rpx;">
            <u-loadmore :status="status" v-if="status != 'loadmore'" />
        </view>
        
        
        <view class="footer" v-if="from == 1">
            <view class="tjkt-btn" @click="$noMultipleClicks(addFloor)">确认添加</view>
        </view>
        <view class="footer" v-if="report == 1">
            <view class="tjkt-btn" @click="$noMultipleClicks(reportFloor)">确认报备</view>
        </view>
        
        <!-- 选择时间 -->
        <u-picker v-model="KStimeShow" mode="time" :params="timeParams" @confirm="chooseTime(1, $event)"></u-picker>
        <u-picker v-model="JStimeShow" mode="time" :params="timeParams" @confirm="chooseTime(2, $event)"></u-picker>
        
        <u-select v-model="show_1" mode="single-column" :list="data.sale" value-name="id" label-name="name" @confirm="confirmMore($event, 1)"></u-select>
        <u-select v-model="show_2" mode="single-column" :list="data.house_type" value-name="id" label-name="name" @confirm="confirmMore($event, 2)"></u-select>
        <u-select v-model="show_3" mode="single-column" :list="data.project" value-name="id" label-name="name" @confirm="confirmMore($event, 3)"></u-select>
        <u-select v-model="show_4" mode="single-column" :list="data.renovation" value-name="id" label-name="name" @confirm="confirmMore($event, 4)"></u-select>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                noClick:true,//连点
                statusBar: 0,
                background: { backgroundColor: 'rgba(255,255,255,0)' },
                type: 0,
                title: '全部楼盘',
                tab: '',
                options1: [
                    {label: '价格从低到高',value: 1},
                    {label: '价格从高到低',value: 2},
                    {label: '面积从低到高',value: 3},
                    {label: '面积从高到低',value: 4}
                ],
                sort: '',
                KStimeShow: false, //开始时间
                JStimeShow: false, //结束时间
                startTime: '', //开始时间
                endTime: '', //结束时间
                timeParams: { //时间格式
                	year: true,
                	month: true,
                	day: true,
                	hour: false,
                	minute: false,
                	second: false
                },
                data: {},
                regionId: 0,//区域id
                priceId: 0,//价格id
                minPrice: '',//最小价格
                maxPrice: '',//最大价格
                areaId: 0,//面积id
                minArea: '',//
                maxArea: '',//
                show_1: false,
                show_2: false,
                show_3: false,
                show_4: false,
                sale: '',//销售状态
                saleId: '',//
                houseType: '',//户型
                houseTypeId: '',//
                project: '',//项目类型
                projectId: '',//
                fit: '',//装修
                fitId: '',//
                status: 'loadmore', //是否显示没有更多了
                page: 1,
                list: [],
                keyword: '',
                from: 0,//修改时 选择周边楼盘
                report: 0,//报备
                isShow: true,
                see: false,
                labelId: [],//标签筛选
            };
        },
        onLoad(option) {
            let _this = this;
            //状态栏高度
            uni.getSystemInfo({
            	success: function(res) {
            		_this.statusBar = res.statusBarHeight;
            	}
            });
            if (option.type) {
                this.type = option.type
                if (this.type == 1) this.title = '新品加推'
                if (this.type == 2) this.title = '其他楼盘'
                if (this.type == 3 || this.type == 4 || this.type == 7) {
                    this.title = '楼盘信息'
                    this.isShow = false
                }
            }
            
            if (option.from) {
                this.from = option.from
                this.title = '楼盘信息'
                this.isShow = false
            }
            // 报备
            if (option.report) {
                this.report = option.report
            }
            this.getScreen()
            this.getList()
        },
        onReachBottom() {
        	if(this.page == 1){return}
        	this.getList()
        },
        methods: {
            // 报备
            toReport(item) {
                // this.$gTo('/pages/index/report?nitem=' + encodeURIComponent(JSON.stringify(item)))
                this.$gTo('/pages/index/report?nitem=' + JSON.stringify(item))
            },
            // 确认报备
            reportFloor() {
                var arr = []
                if (this.list.length > 0) {
                    this.list.forEach(cur => {
                        if (cur.checked) {
                            arr.push(cur)
                        }
                    })
                }
                console.log('arr',arr)
                if (arr.length == 0) {
                    this.$toast('请选择楼盘')
                    return
                } else {
                    console.log(77777)
                    uni.$emit('REPORT_FLOOR_LIST', {arr:arr})
                    console.log(999999)
                    // setTimeout(() => {
                        this.$backT()
                    // }, 300)
                }
            },
            
            // 确认添加
            addFloor() {
                var arr = []
                if (this.list.length > 0) {
                    this.list.forEach(cur => {
                        if (cur.checked) {
                            arr.push(cur)
                        }
                    })
                }
                if (arr.length == 0) {
                    this.$toast('请选择楼盘')
                    return
                } else {
                    uni.$emit('CHOOSE_FLOOR', arr)
                    this.$backT()
                }
            },
            // 选择楼盘
            chooseFloor(item) {
                item.checked = !item.checked
            },
            // 搜索
            doSearch() {
                this.page = 1
                this.list = []
                this.status = 'loadmore'
                this.getList()
            },
            // 获取楼盘列表
            getList() {
            	if (this.status == 'nomore') return;
            	this.status = 'loading';
            	this.$ajax('properties_list', {
            		user_token: this.$getSync('userToken'),
            		page: this.page,
            		limit: 10,
                    type: this.type == 7 ? 0 : this.type,//0全部 1新品加推 2其他楼盘 3项目驻场 4项目总监 5运维经理
                    name: this.keyword,//搜索
                    region_id: this.regionId,//地区id
                    price_id: this.priceId,//价格id
                    start_price: this.minPrice,//开始价格
                    end_price: this.maxPrice,//结束价格
                    area_id: this.areaId,//面积id
                    start_area: this.minArea,//开始面积
                    end_area: this.maxArea,//结束面积
                    open_date: this.startTime,//开盘时间
                    delivery_date: this.endTime,//交房时间
                    sale_id: this.saleId,//销售状态id
                    house_type_id: this.houseTypeId,//户型id
                    project_id: this.projectId,//项目类型id
                    renovation_id: this.fitId,//装修id
                    sort: this.sort,//排序 1价格从低到高 2价格从高到低 3面积从低到高 4面积从高到低
                    label_ids: this.labelId.join(',') || '',
            	}).then(ret => {
            		if (ret.success == 1000) {
            			if (ret.detail.properties.length > 0) {
            				this.list = this.list.concat(ret.detail.properties);
            				this.page++;
            				this.status = 'loadmore'
            			} else {
            				this.status = 'nomore'
            			}
                        if (this.list && this.list.length > 0) {
                            this.list.forEach(cur => {
                                this.$set(cur, 'checked', false)
                            })
                        }
                        console.log('this.list',this.list)
                        this.see = true
            		} else {
            			this.$toast(ret.msg);
            		}
            	});
            },
            // 更多
            confirmMore(e, num) {
                console.log(e)
                if (num == 1) {
                    this.sale = e[0].label
                    this.saleId = e[0].value
                } else if (num == 2) {
                    this.houseType = e[0].label
                    this.houseTypeId = e[0].value
                } else if (num == 3) {
                    this.project = e[0].label
                    this.projectId = e[0].value
                } else if (num == 4) {
                    this.fit = e[0].label
                    this.fitId = e[0].value
                }
            },
            // 选择标签
            changeLabel(item) {
                item.isSelect = !item.isSelect
            },
            // 选择区域
            changeCate(item) {
                this.regionId = item.id || item.region_id
            },
            // 选择价格
            changePrice(item) {
                this.priceId = item.id
            },
            // 选择面积
            changeArea(item) {
                this.areaId = item.id
            },
            // 重置
            reset(num) {
                if (num == 1) this.regionId = 0
                if (num == 2) {
                    this.priceId = 0
                    this.minPrice = ''
                    this.maxPrice = ''
                }
                if (num == 3) {
                    this.areaId = 0
                    this.minArea = ''
                    this.maxArea = ''
                }
                if (num == 4) {
                    this.startTime = ''
                    this.endTime = ''
                    this.sale = ''
                    this.saleId = ''
                    this.houseType = ''
                    this.houseTypeId = ''
                    this.project = ''
                    this.projectId = ''
                    this.fit = ''
                    this.fitId = ''
                }
                if (num == 6) {
                    this.data.label.forEach(cur => {
                        cur.isSelect = false
                    })
                    this.labelId = []
                }
                this.doSearch()
                this.$refs.uDropdown.close();
            },
            // 确定
            confirm(num, e) {
                console.log(e)
                if (num == 1 || num == 4) 
                if (num == 2) {
                    if (this.minPrice && !this.maxPrice) {
                        this.$toast('请输入最大价格')
                        return
                    }
                    if (!this.minPrice && this.maxPrice) {
                        this.$toast('请输入最小价格')
                        return
                    }
                    if (this.minPrice && this.maxPrice) {
                        this.priceId = ''
                    }
                }
                if (num == 3) {
                    if (this.minArea && !this.maxArea) {
                        this.$toast('请输入最大面积')
                        return
                    }
                    if (!this.minArea && this.maxArea) {
                        this.$toast('请输入最小面积')
                        return
                    }
                    if (this.minArea && this.maxArea) {
                        this.areaId = ''
                    }
                }
                if (num == 5) this.sort = e
                if (num == 6) {
                    this.data.label.forEach(cur => {
                        if (cur.isSelect) {
                            this.labelId.push(cur.id)
                        }
                    })
                }
                this.doSearch()
                this.$refs.uDropdown.close();
            },
            
            //选择时间
            chooseTime(num, e) {
            	if (num == 1) {
                    this.startTime = e.year + '-' + e.month + '-' + e.day;
            	}
                if (num == 2) {
                    this.endTime = e.year + '-' + e.month + '-' + e.day;
            	}
            },
            // 获取筛选项
            getScreen() {
                this.$ajax('properties_screen', {
                    // user_token: this.$getSync('userToken'),
                    type: 1,//1筛选加不限
                }).then(ret => {
                    if (ret.success == 1000) {
                        this.data = ret.detail
                        if (this.data.label && this.data.label.length > 0) {
                            this.data.label.forEach(cur => {
                                this.$set(cur, 'isSelect', false)
                            })
                        }
                    } else {
                        this.$toast(ret.msg);
                    }
                });
            },
            
            onPageScroll: function(e) {
            	//nvue暂不支持滚动监听，可用bindingx代替
            	// console.log("滚动距离为：" + e.scrollTop);
            	let a = e.scrollTop * 0.05;
            	if (a > 1) {
            		a = 1;
            	}
            	if (e.scrollTop == 0) {
            		this.background.backgroundColor = 'rgba(255,255,255,0)';
            	} else {
            		this.background.backgroundColor = 'rgba(255,255,255,' + a + ')';
            	}
            },
        }
    };
</script>

<style lang="scss">
    .content{
        padding-bottom: 200rpx;
    }
    .footer{
        width: 100vw;
        background-color: #fff;
        position: fixed;
        bottom: 0;
        left: 0;
        z-index: 9;
    }
    .f-t{
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 14rpx 20rpx;
    }
    .tj-btn{
        padding: 20rpx 25rpx;
        font-size: 28rpx;
        line-height: 1;
        color: #803906;
        background-color: #ffecd2;
        border-radius: 50rpx;
        margin-left: 35rpx;
    }
    .tjkt-btn{
        font-size: 36rpx;
        color: #fff;
        text-align: center;
        padding: 25rpx;
        background-color: #00a1e9;
    }
    .choose{
        width: 45rpx;
        height: 45rpx;
        margin-left: 10rpx;
    }
    
    .drop-more{
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-bottom: 2rpx solid #e6e6e6;
        margin: 0 20rpx;
        text-align: left;
    }
    .drop-more>view{
        width: 27vw;
    }
    .drop-more>input{
        flex: 1;
        height: 100rpx;
    }
    
    
    .term{
        padding: 10rpx 20rpx 0;
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;
        align-items: center;
    }
    .dropprice{
        font-size: 26rpx;
        padding: 10rpx 20rpx;
        border-bottom: 10rpx;
        background-color: #f8f8f8;
        margin: 10rpx;
    }
    .activePrice{
        background-color: #eff1fe;
        color: #00a1e9;
    }
    .custom{
        padding: 20rpx 20rpx 0;
    }
    .custom-tit{
        font-size: 28rpx;
        font-weight: bold;
        text-align: left;
    }
    .custom-inp{
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .inp{
        text-align: center;
        height: 100rpx;
        border-bottom: 2rpx solid #e6e6e6;
    }
    
    
    
    .drop-btn{
        padding: 0 100rpx 20rpx;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .drop{
        background-color: #fff;
    }
    .left-box{
        height: 700rpx;
    	width: 30vw;
        box-sizing: border-box;
        background-color: #f7f8fa;
    }
    .left {
    	width: 100%;
    	height: 94upx;
    	display: flex;
    	justify-content: center;
    	align-items: center;
    	font-size: 25upx;
    	box-sizing: border-box;
    }
    .active {
        background-color: #fff;
    	box-sizing: border-box;
        color: #00a1e9;
        font-size: 30rpx;
        font-weight: bold;
        position: relative;
    }
    .active::after{
        display: block;
        content: '';
        width: 6rpx;
        height: 76rpx;
        background-color: #00a1e9;
        position: absolute;
        left: 0;
        top: 10rpx;
    }
    
    .right-box{
        width: 100vw;
        height: 700rpx;
    }
    .activeR{
        color: #00a1e9;
    }
    .activeL{
        color: #00a1e9;
    }
    
    page{
        background-color: #f5f5f5;
    }
    .add-03{
        width: 29rpx;
        height: 33rpx;
        margin-right: 10rpx;
    }
    .head-add{
        color: #00a1e9;
    }
    
    .search{
        // background-color: #f5f5f5;
        padding: 0 25rpx 20rpx;
    }
    
    .nav{
        // background-color: #f5f5f5;
        padding: 25rpx 0;
        display: flex;
        justify-content: space-around;
        align-items: center;
    }
    .nav-item{
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 28rpx;
        font-weight: bold;
    }
    .arrow-d-01{
        width: 13rpx;
        height: 8rpx;
        margin-left: 7rpx;
    }
    
    
    .wrapper{
        padding: 45rpx 20rpx 0;
        background-color: #fff;
    }
    .item{
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-bottom: 45rpx;
    }
    .del-09{
        width: 213rpx;
        height: 158rpx;
        border-radius: 10rpx;
        margin-right: 15rpx;
    }
    .name{
        font-size: 32rpx;
        font-weight: bold;
        width: 340rpx;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .area{
        padding: 15rpx 0;
        font-size: 24rpx;
        width: 340rpx;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .baobei{
        padding: 15rpx 40rpx;
        font-size: 27rpx;
        color: #803906;
        background-color: #ffecd2;
        border-radius: 15rpx;
    }
    .baobei2{
        padding: 15rpx;
        font-size: 27rpx;
        color: #803906;
        background-color: #ffecd2;
        border-radius: 15rpx;
    }
    .baobei3{
        padding: 15rpx 40rpx;
        font-size: 27rpx;
        color: #fff;
        background-color: #fff;
        border-radius: 15rpx;
    }
    .price{
        font-size: 24rpx;
        // display: flex;
        // justify-content: flex-start;
        // align-items: center;
    }
    .p-l{
        color: #fe3c3c;
        font-size: 36rpx;
        font-weight: bold;
    }
    .p-l-r{
        color: #fe3c3c;
        padding: 0 5rpx;
    }
    .plan{
        color: #5f8fbe;
        font-size: 23rpx;
        line-height: 1;
        padding: 4rpx 13rpx;
        border: 2rpx solid #5f8fbe;
        border-radius: 5rpx;
    }
    
    
</style>
